
<template>
  <transition name='slide'>
    <music-list :title="title" :bg-image='bgImage' :songs='songs' />
  </transition>
</template>

<script>
import MusicList from 'components/list/musicList.vue'
import { mapState } from 'vuex'
import { getSongList } from 'api/detail.js'
export default {
  name: 'songlistIndex',
  components: { MusicList },
  data() {
    return { songs: [] }
  },
  created() {
    this.loadSongList(this.$route.params.id)
  },
  methods: {
    async loadSongList(id) {
      const { data } = await getSongList(id)
      this.songs = this._init(data.data.songlist)
    },
    _init(list) {
      let ret = []
      list.forEach(v => {
        ret.push({
          mid: v.songmid,
          name: v.songname,
          album: {
            id: v.albumid,
            mid: v.albummid,
            name: v.albumname
          },
          mv: {
            vid: v.vid || ''
          },
          interval: v.interval
        })
      })
      return ret
    }
  },
  computed: {
    ...mapState(['songCover']),
    title() {
      return this.songCover.title
    },
    bgImage() {
      return this.songCover.cover
    }
  }
}
</script>

<style scoped>
.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}
</style>